import { message, Modal, Form, Input, Typography, Space, Button } from "antd";
import { useEffect } from "react";
import RequestUtils from "../../../utils/requestUtils";
import RequestApis from "../../../apis/requestApis";

const { Text } = Typography;

/**
 * 主题创建模态框组件
 * 提供主题名称和描述的输入表单，支持表单验证和友好交互
 * @param {Object} props - 组件参数
 * @param {boolean} props.visible - 控制模态框显示/隐藏
 * @param {Function} props.setVisible - 用于更新模态框显示状态的回调函数
 * @param {Function} props.searchAllTopicList - 创建成功后刷新主题列表的回调函数
 * @returns {JSX.Element} 渲染后的模态框组件
 */
const TopicCreate = (props) => {
    const { visible, setVisible, searchAllTopicList } = props;

    // 消息提示组件实例
    const [messageApi, contextHolder] = message.useMessage();

    // 表单实例，用于表单验证和值管理
    const [form] = Form.useForm();

    /**
     * 创建主题接口调用函数
     * 先验证表单合法性，通过后调用接口创建主题
     */
    const createTopic = () => {
        // 表单验证
        form.validateFields()
            .then(values => {
                // 构造请求参数（映射接口字段：description对应topicDescription）
                const createTopicReq = {
                    topic: values.topic,
                    description: values.description
                };

                // 调用创建接口
                RequestUtils.post(RequestApis.messageManage.createTopic, createTopicReq)
                    .then(() => {
                        messageApi.success("主题创建成功");
                        searchAllTopicList(); // 刷新列表
                        setVisible(false); // 关闭模态框
                    })
                    .catch(err => {
                        messageApi.error(err.message || "主题创建失败");
                    });
            })
            .catch(info => {
                // 表单验证失败时提示
                messageApi.warning("请完善必填信息");
            });
    };

    /**
     * 重置表单（当模态框显示状态变化时触发）
     * 确保每次打开模态框都是空表单
     */
    useEffect(() => {
        if (visible) {
            form.resetFields();
        }
    }, [visible, form]);

    // 自定义底部按钮区域（左侧创建，右侧取消）
    const footer = (
        <Space size="middle" style={{ width: "100%", justifyContent: "flex-end" }}>
            {/* 左侧：创建按钮（主按钮样式） */}
            <Button
                type="primary"
                onClick={createTopic}
                style={{ minWidth: 80 }}
            >
                创建
            </Button>

            {/* 右侧：取消按钮（危险样式） */}
            <Button
                danger
                onClick={() => setVisible(false)}
                style={{ minWidth: 80 }}
            >
                取消
            </Button>
        </Space>
    );

    return (
        <Modal
            open={visible}
            title="创建消息主题"
            // 移除默认按钮，使用自定义footer
            footer={footer}
            maskClosable={false} // 点击遮罩层不关闭模态框（防止误操作）
            destroyOnClose={true} // 关闭时销毁组件，释放资源
            style={{ top: 20 }} // 模态框位置上移，避免居中过高
        >
            {/* 消息提示容器 */}
            {contextHolder}

            {/* 表单区域 */}
            <Form
                form={form}
                layout="vertical" // 垂直布局，标签在输入框上方
                initialValues={{ topic: "", description: "" }} // 初始值
                style={{ marginTop: 16 }} // 与标题保持间距
            >
                {/* 主题名称输入项 */}
                <Form.Item
                    name="topic" // 表单字段名
                    label={
                        <Text strong style={{ color: "#1f2329" }}>
                            主题名称 <span style={{ color: "#ff4d4f" }}>*</span>
                        </Text>
                    }
                    rules={[
                        { required: true, message: "请输入主题名称" }, // 非空验证
                        { max: 64, message: "主题名称长度不能超过64个字符" }, // 长度限制
                        { pattern: /^[a-zA-Z0-9_]+$/, message: "主题名称只能包含字母、数字和下划线" } // 格式验证
                    ]}
                    tooltip="主题名称是消息路由的唯一标识，创建后不可修改" // 提示信息
                    style={{ marginBottom: 16 }}
                >
                    <Input
                        placeholder="请输入主题名称（如：ORDER_TOPIC）"
                        maxLength={64}
                        style={{
                            height: 40,
                            borderRadius: 4,
                            borderColor: "#d9d9d9",
                            transition: "border-color 0.3s"
                        }}
                        onChange={(e) => {
                            // 实时去除空格
                            form.setFieldValue("topic", e.target.value.trim());
                        }}
                    />
                </Form.Item>

                {/* 主题描述输入项 */}
                <Form.Item
                    name="description"
                    label={
                        <Text strong style={{ color: "#1f2329" }}>
                            主题描述
                        </Text>
                    }
                    rules={[
                        { max: 512, message: "主题描述长度不能超过512个字符" } // 长度限制
                    ]}
                    tooltip="描述主题的用途或相关说明（非必填）"
                >
                    <Input.TextArea
                        placeholder="请输入主题描述"
                        maxLength={512}
                        rows={4} // 固定4行高度
                        style={{
                            borderRadius: 4,
                            borderColor: "#d9d9d9",
                            resize: "none" // 禁止拉伸
                        }}
                    />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default TopicCreate;